<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户管理 - 系统管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body>
    <div class="layui-container">
        <div class="layui-card">
            <div class="layui-card-header">
                <span>用户管理</span>
                <div style="float: right;">
                    <button class="layui-btn layui-btn-sm" id="refreshBtn">
                        <i class="layui-icon layui-icon-refresh"></i>刷新
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="addUserBtn">
                        <i class="layui-icon layui-icon-add-1"></i>添加用户
                    </button>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="userTable" lay-filter="userTable"></table>
            </div>
        </div>
    </div>

    <!-- 工具栏模板 -->
    <script type="text/html" id="userToolbar">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit" title="编辑用户信息">编辑</button>
        {{#  if(d.is_active){ }}
            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="freeze" title="禁用用户账号">禁用</button>
        {{#  } else { }}
            <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="unfreeze" title="启用用户账号">启用</button>
        {{#  } }}
        <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" lay-event="reset" title="重置用户密码">重置密码</button>
    </div>
    </script>
    <script src="/js/config/api.js"></script>
    <script src="/js/http.js"></script>
    <script src="/js/auth-utils.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/utils.js"></script>
    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.$;
            var bsm_utils = layui.bsm_utils;

            // 初始化用户表格 - 完全参考集成管理页面的方式
            function initUserTable() {
                http.get(API_CONFIG.ADMIN.USERS + '?limit=1000')
                    .then(function (res) {
                        table.render({
                            elem: '#userTable',
                            data: res.data,
                            page: {
                                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], // 完整的布局
                                prev: '上一页',
                                next: '下一页',
                                groups: 5, // 连续显示页码数
                                first: '首页',
                                last: '尾页'
                            },
                            limits: [10, 20, 50, 100],
                            limit: 10,
                            maxHeight: 'full-200',
                            cols: [[
                                { type: 'numbers', title: '序号', width: "60", align: 'center' },
                                { field: 'user_id', title: '账号', width: 200 },
                                { field: 'user_name', title: '姓名', width: 200 },
                                { field: 'org_litename', title: '组织名称', width: 200 },
                                {
                                    field: 'created_at', title: '创建时间', width: 300, templet: function (d) {
                                        return layui.util.toDateString(d.created_at);
                                    }
                                },
                                { field: "session_count", title: "会话数", width: 80 },
                                { fixed: 'right', title: '操作', align: 'center', toolbar: '#userToolbar' }
                            ]]
                        });
                    })
                    .catch(function (err) {
                        layer.msg('加载用户数据失败');
                    });
            }

            // 初始化表格
            initUserTable();

            // 用户表格工具条事件
            table.on('tool(userTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    openUserEditPopup(data);
                } else if (obj.event === 'freeze') {
                    layer.confirm('确定禁用用户账号？', function (index) {
                        freezeUser(data.user_id);
                        layer.close(index);
                    });
                } else if (obj.event === 'unfreeze') {
                    layer.confirm('确定启用用户账号？', function (index) {
                        unfreezeUser(data.user_id);
                        layer.close(index);
                    });
                } else if (obj.event === 'reset') {
                    console.log("user_id:", data.user_id);
                    layer.confirm('用户密码将重置为默认密码，是否继续？', function (index) {
                        resetUserPassword(data.user_id);
                        layer.close(index);
                    });
                }
            });

            // 刷新按钮事件
            $('#refreshBtn').on('click', function () {
                refreshUserTable();
            });

            // 添加用户按钮事件
            $('#addUserBtn').on('click', function () {
                addUser();
            });

            // 刷新函数 - 参考集成管理页面的方式
            function refreshUserTable() {
                var loading = layer.load(1);

                http.get(API_CONFIG.ADMIN.USERS + '?limit=1000')
                    .then(function (res) {
                        layer.close(loading);
                        // 直接重新渲染整个表格，这是最安全的方式
                        table.render({
                            elem: '#userTable',
                            data: res.data,
                            page: {
                                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], // 完整的布局
                                prev: '上一页',
                                next: '下一页',
                                groups: 5, // 连续显示页码数
                                first: '首页',
                                last: '尾页'
                            },
                            limits: [10, 20, 50, 100],
                            limit: 10,
                            maxHeight: 'full-200',
                            cols: [[
                                { type: 'numbers', title: '序号', width: "60", align: 'center' },
                                { field: 'user_id', title: '账号', width: 200 },
                                { field: 'user_name', title: '姓名', width: 200 },
                                { field: 'org_litename', title: '组织名称', width: 200 },
                                {
                                    field: 'created_at', title: '创建时间', width: 300, templet: function (d) {
                                        return layui.util.toDateString(d.created_at);
                                    }
                                },
                                { field: "session_count", title: "会话数", width: 80 },
                                { fixed: 'right', title: '操作', align: 'center', toolbar: '#userToolbar' }
                            ]]
                        });
                        layer.msg('刷新完成', { icon: 1 });
                    })
                    .catch(function (err) {
                        console.error('刷新用户列表失败:', err);
                        layer.close(loading);
                        layer.msg('刷新失败', { icon: 2 });
                    });
            }

            function addUser() {
                layer.msg('打开添加用户窗口');

                // 使用已认证的管理路由
                layer.open({
                    type: 2,
                    title: '添加用户',
                    content: '/admin/user-edit',  // 使用路由中定义的路径
                    area: ['800px', '600px'],
                    maxmin: false,
                    resize: false,
                    success: function (layero, index) {
                        console.log('用户编辑弹窗打开成功');
                    },
                    error: function (xhr, status, error) {
                        console.error('用户编辑弹窗打开失败:', error);
                        layer.msg('打开页面失败: ' + error, { icon: 2 });
                    }
                });
            }

            function resetUserPassword(userid) {
                http.post(API_CONFIG.ADMIN.RESET_PASSWORD, {
                    user_id: userid
                })
                    .then(function (res) {
                        layer.msg('重置用户密码成功: ' + userid);
                    })
                    .catch(function (err) {
                        console.error('重置用户密码失败:', err);
                        layer.msg('重置用户密码失败: ' + err.message, { icon: 2 });
                    });
            }

            function freezeUser(userid) {
                http.post(API_CONFIG.ADMIN.FREEZE_USER, {
                    user_id: userid
                })
                    .then(function (res) {
                        layer.msg('禁用账号成功: ' + userid);
                        refreshUserTable();
                    })
                    .catch(function (err) {
                        console.error('禁用账号失败:', err);
                        layer.msg('禁用账号失败: ' + err.message, { icon: 2 });
                    });
                layer.close(index);
            }

            // 解冻用户
            function unfreezeUser(userid) {
                http.post(API_CONFIG.ADMIN.UNFREEZE_USER, {
                    user_id: userid
                })
                    .then(function (res) {
                        layer.msg('启用账号成功: ' + userid);
                        refreshUserTable();
                    })
                    .catch(function (err) {
                        console.error('启用账号失败:', err);
                        layer.msg('启用账号失败: ' + err.message, { icon: 2 });
                    });
                layer.close(index);
            }
        });

        function openUserEditPopup(userData) {
            layer.msg('打开编辑用户窗口: ' + userData.user_id);
        }

    </script>
</body>

</html>